<template>
  <div class="search">
    <div class="homde">
      <span>搜索：{{ neme }}</span>
    </div>
    <div>
      <span> 你可能感兴趣的 </span>

      <ul class="interested">
        <li v-if="XianGuan.artist">
          <div class="artist">
            <el-image
              style="width: 50px; height: 50px"
              :src="XianGuan.artist[0].img1v1Url"
              fit="fit"
            ></el-image>
            <div class="texst">
              <div class="artists">
                <span>歌手：{{ XianGuan.artist[0].name }}</span>
                <span
                  >粉丝：{{ XianGuan.artist[0].fansSize }}，歌曲：{{
                    XianGuan.artist[0].musicSize
                  }}</span
                >
              </div>
            </div>
          </div>
        </li>
        <li v-if="XianGuan.album">
          <div class="artist">
            <el-image
              style="width: 50px; height: 50px"
              :src="XianGuan.album[0].blurPicUrl"
              fit="fit"
            ></el-image>
            <div class="texst">
              <div class="zhuanj">
                <span>专辑：{{ XianGuan.album[0].name }} </span>
                <span>({{ XianGuan.album[0].alias[0] }})</span>
              </div>

              <span class="name">{{ XianGuan.album[0].artists | niemw }}</span>
            </div>
          </div>
        </li>
        <li v-if="XianGuan.voice">
          <div class="artist">
            <el-image
              style="width: 50px; height: 50px"
              :src="XianGuan.voice[0].baseInfo.coverUrl"
              fit="fit"
            ></el-image>
            <div class="texst">
              <div class="zhuanj">
                <span
                  >{{ XianGuan.voice[0].resourceName }}：
                </span>
                <span>{{
                    XianGuan.voice[0].baseInfo.name
                  }}</span>
              </div>

              <span class="name"
                >播放:{{ XianGuan.voice[0].baseInfo.adjustedPlayCount }}</span
              >
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div><nabo :datas="tabas"></nabo></div>
    <div v-loading="zhuangtai.loading" element-loading-text="加载中">
      <router-view :song="songs"></router-view>
    </div>
  </div>
</template>

<script>
import nabo from "../components/search/nabas.vue";
import API from "../http/API";
export default {
  components: {
    nabo,
  },
  watch: {
    "$route.query.neme": {
      // immediate: true,
      handler(e) {
        // console.log(e);

        this.zhuangtai.loading = true;
        this.neme = e;
        this.httmxinq().then(() => {
          this.http().then(() => {
            this.zhuangtai.loading = false;
            // console.log( zhuangtai.loading )
          });
        });
      },
    },
  },
  data() {
    return {
      // 状态管理
      zhuangtai: {
        loading: true,
      },

      // 需要收索的内容
      neme: "",
      songs: [],
      DataNume: "",
      XianGuan: {},
      tabas: [
        {
          titlie: "单曲",
          to: "/search/geqlist",
        },
        {
          titlie: "歌手",
          to: "/search/artist",
        },
        {
          titlie: "专辑",
          to: "/search/album",
        },
        {
          titlie: "视频",
          to: "/search/video",
        },
        {
          titlie: "歌词",
          to: "/search/lyric",
        },
        {
          titlie: "博客",
          to: "/search/blogs",
        },
        {
          titlie: "声音",
          to: "/search/voice",
        },
        {
          titlie: "用户",
          to: "/search/user",
        },
      ],
    };
  },
  created() {
    this.neme = this.$route.query.neme;
    this.httmxinq().then(() => {
      this.http().then(() => {
        this.zhuangtai.loading = false;
        // console.log( zhuangtai.loading )
      });
    });
    // this.http();
  },
  mounted() {},
  methods: {
    // 并发请求
    // https() {
    //   this.$axios.all([this.httmxinq(), this.http()]).then(
    //     this.$axios.spread((allTask, allCity) => {
    //       console.log("请求1结果", allTask);
    //       console.log("请求2结果", allCity);
    //     })
    //   );
    // },
    // 建议搜索 感兴趣搜索
    async httmxinq() {
      return this.$get(API.SEARCH_MULTIMATCH, {
        keywords: this.neme,
      })
        .then((result) => {
          console.log(result);
          this.XianGuan = result.result;
        })
        .catch((err) => {});
    },

    // 收索单曲
    async http() {
      return this.$get(API.SEARCH, {
        keywords: this.neme,
        type: 1,
        limit: 100,
      })
        .then((result) => {
          // console.log(result);
          if (result.code == 200) {
            this.DataNume = result.result.songCount;
            // console.log(result);
            this.songs = JSON.parse(JSON.stringify(result.result.songs));
            //  this.songs = result.result.songs;
            // console.log(this.songs);
          }
        })
        .catch((err) => {});
    },
  },
  filters: {
    niemw(val) {
      // console.log(val)
      if (val.length == 1) {
        // console.log(val[0].name)
        return val[0].name;
      } else {
        let name;
        for (let index = 0; index < val.length; index++) {
          if (index == 0) {
            name = val[index].name;
          } else {
            name += "/" + val[index].name;
          }
        }
        return name;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  /deep/.el-loading-mask {
    z-index: 90;
    background-color: #fcfcfc;
    .el-loading-spinner {
      top: 50px !important;
    }
  }

  margin: 30px;
  .homde {
    font-size: 25px;
    height: 50px;
    span {
      font-weight: 600;
      // margin-bottom: 10px/;
    }
  }
  .interested {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    max-width: 900px;
    height: 100px;
    // border: 1px solid #000;
    margin-bottom: 10px;
    margin-top: 5px;
    li {
      margin-right: 15px;
      width: 32%;
      height: 80px;
      // border: 1px solid #000;
      background-color: #f4f4f4;
      border-radius: 5px;
      display: flex;
      align-items: center;
      .artist {
        .artists {
          span {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &:nth-child(1) {
              margin-bottom: 5px;
              font-size: 15px;
            }
            &:nth-child(2) {
              margin-top: 5px;
              font-size: 13px;
              color: rgb(148, 145, 145);
            }
          }
        }
        display: flex;
        width: 90%;
        margin: auto;
        .el-image {
          border-radius: 50%;
          img {
            border-radius: 50%;
          }
        }
        .texst {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-left: 10px;
          display: flex;
          justify-content: center;
          flex-direction: column;
          flex: 1;
          .zhuanj {
            display: flex;
            span {
              display: block;

              &:nth-child(1) {
                margin-bottom: 5px;
                font-size: 15px;
              }
              &:nth-child(2) {
                font-size: 15px;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: rgb(148, 145, 145);
              }
            }
          }
          .name {
            margin-top: 5px;
            font-size: 13px;
            color: rgb(148, 145, 145);
          }
        }
      }
    }
  }
}
</style>